<template>
    <el-dialog
        v-model="state.dialog.visible"
        :title="options.config.title"
        :width="options.config.width || '520px'"
        :destroy-on-close="true"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        append-to-body
        class="z-dialog-form"
        @closed="closed">
        <slot v-if="slots.default" name="default"></slot>
        <Form
            v-else
            :options="formOptions"
            @closed="closed">
        </Form>
    </el-dialog>
</template>

<script lang="ts">
import { Action as FormAction, type UIProps, type Config as FormConfig } from './Form.vue'

export interface Options {
    config?: Config;
    body?: UIProps[];
}
export interface Config extends Omit<FormConfig, 'parentUIName'> {
    title: string
    width?: string | number
}
export enum Action {
    formCancel = FormAction.formCancel, 
    formSubmit = FormAction.formSubmit
}
</script>

<script setup lang="ts">
import Form from './Form.vue'
import useDialogDrawer from './hooks/useDialogDrawer'

const props = defineProps({
    options: {
        type: Object,
        default: () => ({})
    },
})

const slots = defineSlots()
const emits = defineEmits(['closed'])

const {
    state,
    formOptions,
    closed
} = useDialogDrawer(props, emits)
</script>

<style lang="scss">
.z-dialog-form {
    --el-dialog-padding-primary: 13px !important;
    padding-bottom: 0;
    // border-radius: var(--el-border-radius-base) !important;
    border-radius: 12px !important;
    .el-dialog__header{
        border-bottom: 1px solid #eee;
        margin-bottom: var(--el-dialog-padding-primary);
        line-height: 1;
    }
    .el-dialog__title{
        font-size: 15px;
        color: #212121;
        line-height: 1;
    }
    .el-dialog__headerbtn{
        width: 42px;
        height: 44px;
    }
}
</style>